<!-- Created by henian.xu on 2018/2/6. -->

<template>
    <div
        :class="['select',...statusClass]"
        ref="self">
        <div
            class="out-show"
            @click="onSwitch">
            <i class="f-icon">&#xf107;</i>
            <span>{{ model||placeholder }}</span>
        </div>

        <!-- popup -->
        <div
            class="popup select-popup"
            v-clickoutside="close"
            :style="positionStyle"
            ref="popup"
            v-show="popupShow">
            <div
                class="item disable ta-c"
                v-if="!options.length">无数据</div>
            <div
                v-else
                class="item"
                v-for="(item) in options"
                :key="item.id"
                @click="onItem(item)">
                <span>{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import PopupMixin from '~/mixins/popup.vue';
import clickoutside from '~/utils/ClickOutSide.js';
export default {
    name: 'XSelect',
    mixins: [PopupMixin],
    directives: { clickoutside },
    data() {
        return {
            alignSelf: true,
        };
    },
    props: {
        value: {
            type: [String, Number],
            default: '',
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        clear: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: '请选择',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        model: {
            get() {
                const option = this.optionsMap[this.value] || {};
                return option.name;
                // return this.value;
            },
            set(val) {
                this.$emit('input', val);
                // this.dispatch('formItem', 'x.form.change', [val]);
            },
        },
        options() {
            return this.data.map(item => {
                if (typeof item === 'string' || typeof item === 'number') {
                    return {
                        id: item,
                        name: item,
                    };
                } else if (Array.isArray(item)) {
                    console.warn('选项不能是数组');
                    return {};
                } else if (typeof item === 'object') {
                    return item;
                }
            });
        },
        optionsMap() {
            return this.options.reduce((prev, next) => ((prev[next.id] = next), prev), {});
        },
    },
    methods: {
        onItem(item) {
            this.popupShow = false;
            this.model = item.id;
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.select {
    flex: 1 1 1%;
    display: inline-block;
    border: 1px solid $color-border;
    padding: 0 $padding-small;
    background-color: #fff;
    border-radius: 5px;
    &.open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: #fff;
    }
    > .out-show {
        cursor: pointer;
        line-height: $form-item-height;
        @include clearfix;
        > .f-icon {
            float: right;
            width: $form-item-height/2;
            text-align: center;
        }
        > span {
            display: block;
            @include text-line(1);
        }
    }

    &-popup {
        background-color: #fff;
        border: 1px solid $color-border;
        border-top: 0;
        box-shadow: 0 5px 8px -4px rgba(0, 0, 0, 0.3);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        overflow: hidden;
        max-height: 300px;
        overflow-y: auto;
        > .item {
            line-height: $form-item-height;
            padding: 0 $padding-small;
            @include text-line(1);

            &.disable {
                color: $gray6;
            }
            &:not(.disable):hover {
                background-color: $color-main;
                color: #fff;
            }
        }
    }
}

.success {
    .select {
        border-color: $color-success;
    }
}
.error {
    .select {
        border-color: $color-danger;
    }
}
</style>
